<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
				
			.green{
				background-color: green;
			}
			.red{
				background-color: red;
			}
			.content{
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
		</style>

	</head>
	<body>

		<div id="box"></div>
		<!-- id值在一个网页时唯一的，设置id的侧重点在于js的控制 -->
		<!-- 
		快速写法
		id[id=box]
		id#box
		-->
		<!-- 
		class 元素的类名，可以重复，更侧重于css样式控制 
		draggable 设置是否可以拖动，true表示可以拖动，false不可以拖动（默认），
		尝试拖动红色的和绿色的
		title 鼠标放在元素上会显示的内容
		-->
		<div class="box red" title="红色的" draggable=true></div>
		<div class="box green" title="绿色的"></div>
		<!-- 
		快速写法
		div[class=box]
		div.box 
		-->
		<!-- 
		data-* 自定义属性，*代表任何 ，主要用于js获取元素的值
		Element.dataset 可以获取元素的所有自定义属性的对象，以后js讲解，现在了解即可
		-->
		<div id="data" data-message="hello" data-flag="1"></div>
		<hr>
		<br>
		<!-- tabindex,按tab键后，会按照tabindex的值得大小顺序进行切换 ，尝试点击输入框，然后按tab键-->
		<input type="text" tabindex="6"  placeholder="6">
		<br>
		<input type="text" tabindex="1" placeholder="1">
		<br>
		<input type="text" tabindex="3" placeholder="3">
		<br>
		<input type="text" tabindex="2"  placeholder="2">
		<br>
		<hr>

		<!-- 设置contenteditable="true"，里面的文字可以编辑，尝试编辑文字 -->
		<div class="content" contenteditable="true">
			里面的文字
		</div>
		<!-- spellcheck="true"，会检查输入框的英语拼写，如果英语拼写错误会有红色波浪线提示，尝试在里面写英语 -->
		<input type="text" spellcheck="true">

		<script type="text/javascript">
			let dataEle = document.getElementById('data');
			console.log(dataEle.dataset.message)
		</script>
	</body>
</html>
